<template>
  <div class="shoplist_container">
    <p>附近商家</p>
    <div>
      <div v-for="item in shopList" :key="item.id" class="shop_li">
        <img
          :src="'https://elm.cangdu.org/img/' + item.image_path"
          class="shop_img"
        />
        <div class="shop_right">
          <div class="shop-title">
            <header>
              <h4>{{ item.name }}</h4>
              <h5 class="icon-star">{{ item.star }}</h5>
            </header>
            <div class="rating_order_num">
              <section class="rating_order_num_right">
                <span
                  class="delivery_style delivery_left"
                  v-if="item.delivery_mode"
                  >{{ item.delivery_mode.text }}</span
                >
                <span class="delivery_style delivery_right">准时达</span>
              </section>
            </div>
          </div>
          <div class="fee_distance">
            <p class="fee">
              ¥{{ item.float_minimum_order_amount }}起送
              <span class="segmentation">/</span>
              {{ item.piecewise_agent_fee.tips }}
            </p>
            <p class="distance_time">
              <span v-if="Number(item.distance)"
                >{{
                  item.distance > 1000
                    ? (item.distance / 1000).toFixed(2) + "km"
                    : item.distance + "m"
                }}
                <span class="segmentation">/</span>
              </span>
              <span v-else>{{ item.distance }}</span>
              <span class="segmentation">/</span>
              <span class="order_time">{{ item.order_lead_time }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      shopList: [],
      star: []
    }
  },
  methods: {
    getShopList () {
      this.$api.believe.login().then(res => {
        this.shopList = res.data
        // console.log(this.shopList)
        for (let i = 0; i < this.shopList.length; i++) {
          let m = this.shopList[i].rating
          let n = Math.floor(m)
          this.shopList[i].star = '★★★★★☆☆☆☆☆☆'.substr(5 - n, 10 - n)
          // this.shopList[i].star = '★★★★★☆☆☆☆☆☆'.splice(5 - n, 4, '❂')
        }
      })
    }
  },
  mounted () {
    this.getShopList()
  }
}
</script>

<style scoped lang="scss">
.shoplist_container {
  p {
    margin: 0;
  }
  .shop_li {
    display: flex;
    justify-content: space-around;
    /*padding: 2px 10px;*/
    .shop_right {
      display: flex;
      flex-flow: column;
    }
    .shop-title {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 18px;
      .icon-star{
        color: #D4B35C;
      }
      .delivery_left {
        color: #fff;
        background-color: #3190e8;
        border: 0.025rem solid #3190e8;
        font-size: 8.5px;
      }
      .delivery_right {
        color: #3190e8;
        border: 0.025rem solid #3190e8;
        font-size: 8.5px;
      }
    }
    .fee_distance {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .distance_time {
        font-style: normal;
        color: #333;
        font-weight: 400;
        box-sizing: border-box;
      }
      .fee {
        font-size: 0.5rem;
        color: #666;
      }
    }
    .shop_img {
      width: 65px;
      height: 65px;
    }
  }
}
</style>
